<template>
    <Transition name="show2">
        <div v-show="flag" class="enter_big">
            <div class="enter_top">{{ title }}</div>
            <div class="no" @click="thenfn(false)">取消</div>
            <div class="yes" @click="thenfn(true)">确定</div>
        </div>
    </Transition>
</template>
<script>
export default {
    name: 'enter_common'
}
</script>
<script setup>
const props = defineProps(
    {
        title: {
            type: String,
            default: () => '',
        },
        flag: {
            type: Boolean,
            default: () => false,
        },
    }
)
const emit = defineEmits(['then'])
function thenfn(flag) {
    emit('then', flag)
}
</script>
<style scoped lang="scss">
@function r($v) {
    @return $v / (390 / 10rem)
}

.show2-enter-active {
    animation: shadow3 0.5s ease;
}

.show2-leave-active {
    animation: shadow3 0.5s ease reverse;
}

@keyframes shadow3 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.enter_big {
    min-width: r(100);
    max-width: r(200);
    height: r(100);
    position: fixed;
    top: 50%;
    left: 50%;
    background-color: #000000e4;
    transform: translate(-50%, -50%);
    position: relative;
    z-index: 20;

    .enter_top {
        height: 50%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: r(14);
        color: #fff;
    }

    .no {
        width: 40%;
        height: r(40);
        font-size: r(14);
        color: #fff;
        position: absolute;
        left: r(10);
        bottom: r(10);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .yes {
        width: 40%;
        height: r(40);
        font-size: r(14);
        color: #fff;
        position: absolute;
        right: r(10);
        bottom: r(10);
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>